<!--
 * @Descripttion: 出手鸭小程序
 * @version:1.0.1 
 * @Author: HHL
 * @Date: 2023-10-18 15:21:29
 * @LastEditTime: 2023-10-19 16:59:02
 * @LastEditors:Hui
-->



<template>
  <view class="fixed-footer flex">
    <view
      class="item"
      v-for="item in list"
      :key="item.value"
      :class="item.value === active ? 'active' : ''"
      @click="handleClick(item)"
    >
      <image
        :src="item.value === active ? item.activeIcon : item.icon"
        mode="scaleToFill"
        class="icon"
      />
      <view class="text">{{item.label}}</view>
    </view>
  </view>
</template>


<script>
export default {
  props: {
    active: { type: String, default: '' },
    userInfo: { type: Object, default: {} }
  },

  data() {
    return {
      list: [
      ]
    }
  },

  methods: {
    handleClick({ value, url }) {
      if (value === this.active) { return }

      if (!this.userInfo.userId) {
        this.goLogin()
        return
      }

      uni.navigateTo({ url })
    }
  }
}
</script>

<style lang="scss" scoped>

.fixed-footer{
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  background: #fff;
  padding: 28rpx 0 44rpx;
  max-width: 750rpx;
  border-top: 1px solid #F4F4F4;
}

.item{
  width: 50%;
  .icon{
    width: 44rpx;
    height: 44rpx;
    display: block;
    margin: 0 auto;
  }
  .text{
    font-size: 28rpx;
    line-height: 52rpx;
    color: #000;
    text-align: center;
  }
  &.active{
    .text{
      color: #ED4334;
    }
  }
}



</style> 